<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-left" @click="goBack">
				<text class="back-icon">←</text>
				<text class="back-text">返回</text>
			</view>
			<text class="page-title">许可审批</text>
			<view class="header-right">
				<text class="refresh-btn" @click="refreshData">刷新</text>
			</view>
		</view>

		<!-- 筛选器 -->
		<view class="filter-section">
			<view class="filter-tabs">
				<view 
					class="filter-tab" 
					:class="{ active: selectedStatus === 'all' }"
					@click="selectStatus('all')"
				>
					<text class="tab-text">全部</text>
					<view class="tab-count">{{ getTotalCount() }}</view>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: selectedStatus === 'pending' }"
					@click="selectStatus('pending')"
				>
					<text class="tab-text">待审批</text>
					<view class="tab-count">{{ getPendingCount() }}</view>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: selectedStatus === 'approved' }"
					@click="selectStatus('approved')"
				>
					<text class="tab-text">已通过</text>
					<view class="tab-count">{{ getApprovedCount() }}</view>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: selectedStatus === 'rejected' }"
					@click="selectStatus('rejected')"
				>
					<text class="tab-text">已拒绝</text>
					<view class="tab-count">{{ getRejectedCount() }}</view>
				</view>
			</view>
		</view>

		<!-- 许可列表 -->
		<scroll-view class="list-scroll" scroll-y>
			<view class="list-container">
				<view
					v-for="(item, index) in filteredPermitList"
					:key="item.id"
					class="permit-card"
					@click="viewPermitDetail(item)"
				>
					<!-- 卡片头部 -->
					<view class="card-header">
						<view class="header-left">
							<text class="permit-number">{{ item.permitNumber }}</text>
							<view class="status-badge" :class="getStatusClass(item.status)">
								<text class="status-text">{{ getStatusText(item.status) }}</text>
							</view>
						</view>
						<view class="header-right">
							<text class="apply-time">{{ formatTime(item.applyTime) }}</text>
						</view>
					</view>

					<!-- 卡片内容 -->
					<view class="card-content">
						<view class="content-row">
							<text class="label">许可类型：</text>
							<text class="value">{{ getPermitTypeText(item.permitType) }}</text>
						</view>
						<view class="content-row">
							<text class="label">申请人：</text>
							<text class="value">{{ item.applicant }}</text>
						</view>
						<view class="content-row">
							<text class="label">申请部门：</text>
							<text class="value">{{ item.department }}</text>
						</view>
						<view class="content-row">
							<text class="label">作业地点：</text>
							<text class="value">{{ item.workLocation }}</text>
						</view>
						<view class="content-row">
							<text class="label">作业时间：</text>
							<text class="value">{{ formatDateTime(item.startTime) }} - {{ formatDateTime(item.endTime) }}</text>
						</view>
						<view class="content-row">
							<text class="label">申请说明：</text>
							<text class="value description">{{ item.description }}</text>
						</view>
					</view>

					<!-- 卡片底部 -->
					<view class="card-footer">
						<view class="permit-info">
							<text class="info-text">关联JSA: {{ item.relatedJsa }}</text>
							<text class="info-text">优先级: {{ getPriorityText(item.priority) }}</text>
						</view>
						<view class="action-buttons">
							<button 
								class="action-btn detail-btn" 
								@click.stop="viewPermitDetail(item)"
							>
								查看详情
							</button>
							<button 
								v-if="item.status === 'pending'"
								class="action-btn approve-btn" 
								@click.stop="approvePermit(item, 'approved')"
							>
								通过
							</button>
							<button 
								v-if="item.status === 'pending'"
								class="action-btn reject-btn" 
								@click.stop="approvePermit(item, 'rejected')"
							>
								拒绝
							</button>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="filteredPermitList.length === 0" class="empty-state">
					<text class="empty-icon">📝</text>
					<text class="empty-text">暂无许可申请</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedStatus: 'pending', // 默认选择待审批
				permitList: [
					{
						id: '1',
						permitNumber: 'PER20250101001',
						permitType: 'hot_work',
						applicant: '张三',
						department: '维修部',
						workLocation: 'A区设备车间',
						startTime: '2025-01-16 09:00:00',
						endTime: '2025-01-16 17:00:00',
						description: '设备维护需要进行动火作业，包括焊接和切割操作',
						status: 'pending',
						applyTime: '2025-01-15 16:30:00',
						relatedJsa: 'JSA20250101001',
						priority: 'high'
					},
					{
						id: '2',
						permitNumber: 'PER20250101002',
						permitType: 'confined_space',
						applicant: '李四',
						department: '工程部',
						workLocation: 'B区储罐',
						startTime: '2025-01-17 08:00:00',
						endTime: '2025-01-17 16:00:00',
						description: '储罐内部清洁作业，需要进入受限空间',
						status: 'pending',
						applyTime: '2025-01-15 14:20:00',
						relatedJsa: 'JSA20250101002',
						priority: 'medium'
					},
					{
						id: '3',
						permitNumber: 'PER20250101003',
						permitType: 'electrical',
						applicant: '王五',
						department: '电气部',
						workLocation: 'C区配电室',
						startTime: '2025-01-16 14:00:00',
						endTime: '2025-01-16 18:00:00',
						description: '配电柜检修作业，涉及高压电操作',
						status: 'approved',
						applyTime: '2025-01-14 10:15:00',
						relatedJsa: 'JSA20250101003',
						priority: 'high'
					},
					{
						id: '4',
						permitNumber: 'PER20250101004',
						permitType: 'excavation',
						applicant: '赵六',
						department: '土建部',
						workLocation: 'D区施工现场',
						startTime: '2025-01-18 08:00:00',
						endTime: '2025-01-18 17:00:00',
						description: '地下管线开挖作业',
						status: 'rejected',
						applyTime: '2025-01-14 09:30:00',
						relatedJsa: 'JSA20250101004',
						priority: 'low'
					}
				]
			}
		},
		computed: {
			filteredPermitList() {
				if (this.selectedStatus === 'all') {
					return this.permitList
				}
				return this.permitList.filter(item => item.status === this.selectedStatus)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			
			refreshData() {
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				})
			},
			
			selectStatus(status) {
				this.selectedStatus = status
			},
			
			getTotalCount() {
				return this.permitList.length
			},
			
			getPendingCount() {
				return this.permitList.filter(item => item.status === 'pending').length
			},
			
			getApprovedCount() {
				return this.permitList.filter(item => item.status === 'approved').length
			},
			
			getRejectedCount() {
				return this.permitList.filter(item => item.status === 'rejected').length
			},
			
			getStatusClass(status) {
				return `status-${status}`
			},
			
			getStatusText(status) {
				const statusMap = {
					pending: '待审批',
					approved: '已通过',
					rejected: '已拒绝'
				}
				return statusMap[status] || status
			},
			
			getPermitTypeText(type) {
				const typeMap = {
					hot_work: '动火作业',
					confined_space: '受限空间',
					electrical: '电气作业',
					excavation: '开挖作业',
					high_altitude: '高空作业'
				}
				return typeMap[type] || type
			},
			
			getPriorityText(priority) {
				const priorityMap = {
					high: '高',
					medium: '中',
					low: '低'
				}
				return priorityMap[priority] || priority
			},
			
			formatTime(time) {
				return time.split(' ')[0]
			},
			
			formatDateTime(time) {
				const date = new Date(time)
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				const hours = date.getHours().toString().padStart(2, '0')
				const minutes = date.getMinutes().toString().padStart(2, '0')
				return `${month}-${day} ${hours}:${minutes}`
			},
			
			viewPermitDetail(item) {
				uni.showToast({
					title: `查看许可详情: ${item.permitNumber}`,
					icon: 'none'
				})
			},
			
			approvePermit(item, action) {
				const actionText = action === 'approved' ? '通过' : '拒绝'
				uni.showModal({
					title: `${actionText}许可`,
					content: `确定要${actionText}许可 ${item.permitNumber} 吗？`,
					success: (res) => {
						if (res.confirm) {
							item.status = action
							uni.showToast({
								title: `${actionText}成功`,
								icon: 'success'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #f8f9fa;
		min-height: 100vh;
	}
	
	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #fff;
		border-bottom: 1rpx solid #e4e7ed;
		
		.header-left {
			display: flex;
			align-items: center;
			
			.back-icon {
				font-size: 36rpx;
				margin-right: 10rpx;
				color: #409EFF;
			}
			
			.back-text {
				font-size: 28rpx;
				color: #409EFF;
			}
		}
		
		.page-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.header-right {
			.refresh-btn {
				font-size: 28rpx;
				color: #409EFF;
			}
		}
	}
	
	.filter-section {
		background: #fff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #e4e7ed;
		
		.filter-tabs {
			display: flex;
			gap: 16rpx;
			flex-wrap: wrap;
			
			.filter-tab {
				position: relative;
				padding: 16rpx 20rpx;
				border-radius: 24rpx;
				background: #f5f5f5;
				display: flex;
				align-items: center;
				gap: 8rpx;
				transition: all 0.3s ease;
				
				&.active {
					background: #409EFF;
					
					.tab-text {
						color: #fff;
					}
					
					.tab-count {
						background: rgba(255, 255, 255, 0.3);
						color: #fff;
					}
				}
				
				.tab-text {
					font-size: 26rpx;
					color: #666;
					font-weight: 500;
				}
				
				.tab-count {
					background: #e4e7ed;
					color: #666;
					border-radius: 12rpx;
					padding: 4rpx 10rpx;
					font-size: 20rpx;
					min-width: 28rpx;
					text-align: center;
				}
			}
		}
	}
	
	.list-scroll {
		flex: 1;
	}
	
	.list-container {
		padding: 20rpx;
		
		.permit-card {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
			overflow: hidden;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.98);
			}
			
			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 30rpx 16rpx;
				border-bottom: 1rpx solid #f0f0f0;
				
				.header-left {
					display: flex;
					align-items: center;
					gap: 16rpx;
					
					.permit-number {
						font-size: 32rpx;
						font-weight: bold;
						color: #409EFF;
					}
					
					.status-badge {
						padding: 8rpx 16rpx;
						border-radius: 12rpx;
						font-size: 22rpx;
						
						&.status-pending {
							background: #fff7e6;
							color: #fa8c16;
						}
						
						&.status-approved {
							background: #f6ffed;
							color: #52c41a;
						}
						
						&.status-rejected {
							background: #fff2f0;
							color: #ff4d4f;
						}
						
						.status-text {
							font-weight: 500;
						}
					}
				}
				
				.header-right {
					.apply-time {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			
			.card-content {
				padding: 20rpx 30rpx;
				
				.content-row {
					display: flex;
					margin-bottom: 16rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.label {
						font-size: 28rpx;
						color: #666;
						min-width: 160rpx;
					}
					
					.value {
						font-size: 28rpx;
						color: #333;
						flex: 1;
						
						&.description {
							line-height: 1.4;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}
				}
			}
			
			.card-footer {
				padding: 20rpx 30rpx 24rpx;
				border-top: 1rpx solid #f0f0f0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.permit-info {
					display: flex;
					flex-direction: column;
					gap: 8rpx;
					
					.info-text {
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.action-buttons {
					display: flex;
					gap: 12rpx;
					
					.action-btn {
						padding: 10rpx 20rpx;
						border-radius: 20rpx;
						font-size: 22rpx;
						border: none;
						
						&.detail-btn {
							background: #f0f0f0;
							color: #666;
						}
						
						&.approve-btn {
							background: #52c41a;
							color: #fff;
						}
						
						&.reject-btn {
							background: #ff4d4f;
							color: #fff;
						}
					}
				}
			}
		}
		
		.empty-state {
			text-align: center;
			padding: 120rpx 0;
			
			.empty-icon {
				font-size: 120rpx;
				margin-bottom: 20rpx;
			}
			
			.empty-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
</style>